<template>
    <div class="PersonalCenter">

        <h2 style="margin-bottom: 20px">
            <span>个人中心</span>
            <el-button
                    type="medium"
                    round
                    @click="goSetting"
                    style="float: right">
                个人设置
            </el-button>
        </h2>
        <div>
            <el-row :gutter="10">
                <el-col :span="5">
                    <div class="grid-content bg-purple">
                        <div style="overflow: hidden">
                            <el-image fit="cover" :src="user.userFace"
                                      style="height:113px;margin:auto;display: block;"/>
                        </div>
                    </div>
                </el-col>
                <el-col :span="19">
                    <div class="grid-content bg-purple-light">
                        <h2 class="j-name">
                            <span style="border-right: 1px solid;padding: 0 10px;margin-right: 10px;">{{user.name}}</span>
                            <i class="el-icon-male" v-if="user.sex == '男'" style="color: #409eff"/>
                            <i class="el-icon-female" v-else style="color: #f7acbc"/>
                        </h2>
                        <h2>
                        </h2>
                    </div>
                </el-col>
            </el-row>
        </div>
        <el-button class="el-icon-plus" round style="width: 100%;margin: 10px 0;" @click="dialogVisible = true">新增
        </el-button>
        <article-content/>

        <el-dialog
                :visible.sync="dialogVisible"
                width="40%">
            <rich-text @outRichText="outRichText"/>
        </el-dialog>
    </div>
</template>

<script>
    import {mapState} from "vuex";
    import personalCenter from "../../../components/personal/personalCenter";
    import RichText from "./components/richText/richText";
    import ArticleContent from "../../components/articleContent/articleContent";

    export default {
        name: "PersonalCenter",
        components: {
            ArticleContent,
            RichText,
            personalCenter
        },
        data() {
            return {
                activeName: "basicSettings",
                dialogVisible: false,
            }
        },

        computed: {
            ...mapState({
                user: state => state.user,
                timeServiceApi: state => state.timeServiceApi,
            }),
        },
        methods: {
            outRichText(data) {
                this.dialogVisible = false
            },
            goSetting(){
                this.$router.replace('/personal/settings')
            }
        }
    }
</script>

<style scoped>
    .PersonalCenter {
        width: 644px;
        margin: auto;
        background: #ffffff;
        padding: 10px 10px 20px 10px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 26%)
    }

    ::v-deep .el-tabs--border-card {
        background: #FFF;
        border: 0px solid #DCDFE6;
        box-shadow: 0 0px 0px 0 rgb(0 0 0 / 12%), 0 0 0px 0 rgb(0 0 0 / 4%);
    }

    ::v-deep .el-tabs--border-card > .el-tabs__header {
        background-color: #F5F7FA;
        border: 1px solid #E4E7ED;
        margin: 0;
    }
</style>